<template>
  <div class="mydiv flex a-c j-s">
    <div class="flex a-c demo" :key="item.id" v-for="item in data">
      <div>
        <a :href="item.URL">
          <img :src="item.imgURL" width="300px;height:200px;" />
        </a>
      </div>
      <div style="text-align:center;">
        <a :href="item.URL">{{item.title}}</a>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  async created() {
    let { data } = await axios.get("api/list.json");
    if (this.$route.params.day == undefined) {
      this.data = data.data.Day1List;
      return;
    }
    switch (this.$route.params.day) {
      case "1":
        this.data = data.data.Day1List;
        break;
      case "2":
        this.data = data.data.Day2List;
        break;
      case "3":
        this.data = data.data.Day3List;
        break;
      case "4":
        this.data = data.data.Day4List;
        break;
      case "5":
        this.data = data.data.Day5List;
        break;
      default:
        break;
    }
  },
  data() {
    return {
      data: []
    };
  }
};
</script>   

<style>
.mydiv {
  width: 1000px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.demo {
  flex-direction: column;
  padding: 20px;
  width: 33vh;
}
</style>